
 
 import React, { useState, useCallback } from 'react';

 // 记忆化组件，只有当 props 变化时才会重新渲染
 const ChildComponent = React.memo(({ onClick, count }) => {
    console.log('ChildComponent 渲染');
    return (
        <button onClick={onClick}>
        点击增加父组件计数: {count}
        </button>
    );
 });
 
 const Parent = () => {
    const [count, setCount] = useState(0);
    const [otherState, setOtherState] = useState('');
 
    // 使用 useCallback 记忆化回调函数
    const handleClick = useCallback(() => {
        setCount(prev => prev + 1);
    }, []); // 空依赖数组意味着这个函数永远不会重新创建
 
    // 没有使用 useCallback 的函数
    const handleChange = (e) => {
        setOtherState(e.target.value);
    };
 
   return (
     <div>
       <h1>父组件计数: {count}</h1>
       <input
            type="text"
            value={otherState}
            onChange={handleChange}
            placeholder="输入内容"
       />
       <ChildComponent onClick={handleClick} count={count} />
     </div>
   );
 };
 
 
 export default function TestUseCallback() {
    return (
        <div>
            <h1>TestUseCallback</h1>
            <Parent />
        </div>
    )
}